import { View, Image, Text } from "@tarojs/components";
import AddCartButton from "../../components/AddCartButton";
import CartFixedButton from "../../components/CartFixedButton";
import { AtCard } from "taro-ui";
import { AtMessage } from "taro-ui";
import "./index.scss";

import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";
import { getCurrentInstance } from "@tarojs/taro";
import { getDetailInfo } from "../../api/detail";
import { connect } from "react-redux";
import { ImageUrl } from "../../utils/request";
type DetailType = {
  goodsId: number;
  goodsName: string;
  goodsPicture: string;
  price: number;
  quantity: number;
  stockId: number;
};

type attribute = {
  date: string;
  weight: string;
  isMySelf: number;
  shelflife: string;
  production: string;
};
const index = props => {
  const [detaillInfo, SetDetialInfo] = useState<DetailType>();
  const [attribute, SetAttribute] = useState<attribute>();
  useEffect(() => {
    const { router } = getCurrentInstance();
    const id = router.params.id;
    getDetailInfo(id).then(item => {
      SetAttribute(JSON.parse(item.attribute));

      SetDetialInfo(item);
    });
  }, []);

  return (
    <View className="DetailWrapper">
      <AtMessage />
      {/* 头部 */}
      <View className="TitlePicture">
        {detaillInfo && (
          <Image
            mode="scaleToFill"
            src={ImageUrl + detaillInfo.goodsPicture}
          ></Image>
        )}
      </View>
      {/* 基本信息 */}
      <View className="baseContent">
        <View style={{ fontWeight: 900, fontSize: 20 }}>
          {detaillInfo && detaillInfo.goodsName}
        </View>
        <View style={{ fontSize: 14, color: "#959595", marginTop: 5 }}>
          {" "}
          剩余 {detaillInfo && detaillInfo.quantity}
        </View>
        <View
          style={{ color: "#fb5146", display: "inline-block", marginTop: 3 }}
        >
          ￥
          <View
            style={{ fontWeight: 900, fontSize: 18, display: "inline-block" }}
          >
            {detaillInfo && detaillInfo.price}
          </View>
        </View>
        <View
          className="add_cart_button_position"
          onClick={() => {
            Taro.atMessage({
              message: "添加成功",
              type: "success"
            });
            props.dispatch({
              type: "cart/addCartList",
              payload: {
                id: detaillInfo.goodsId,
                picture: detaillInfo.goodsPicture,
                title: detaillInfo.goodsName,
                price: detaillInfo.price,
                num: detaillInfo.quantity,
                onSelect: false,
                stockId: detaillInfo.stockId
              }
            });
          }}
        >
          <AddCartButton />
        </View>
      </View>
      {/* 配送信息 */}
      <View className="express_msg">
        配送 &nbsp;<Text className="my_tab">商家自配</Text>
        <Text> &nbsp; 可预定,半小时送达~嗖的一下~</Text>
      </View>
      {/* 详细 */}
      <View className="detail_msg">
        <View className="detail_msg_title">商品详情</View>
        <View className="detail_msg_list at-row at-row--wrap">
          {attribute && attribute.weight && (
            <View className="at-col at-col-6">
              <Text className="detail_attribute">重量</Text>
              <Text className="detail_msg">{attribute.weight}克</Text>
            </View>
          )}
          {attribute && attribute.production && (
            <View className="at-col at-col-6">
              <Text className="detail_attribute">产地</Text>
              <Text className="detail_msg">{attribute.production}</Text>
            </View>
          )}
          {attribute && attribute.shelflife && (
            <View className="at-col at-col-6">
              <Text className="detail_attribute">保质时长</Text>
              <Text className="detail_msg">{attribute.shelflife}月</Text>
            </View>
          )}
          {attribute && attribute.isMySelf && (
            <View className="at-col at-col-6">
              <Text className="detail_attribute">是否是沃尔玛产品</Text>
              <Text className="detail_msg">
                {attribute.isMySelf == 1 ? "是" : "否"}
              </Text>
            </View>
          )}
          {attribute && attribute.date && (
            <View className="at-col at-col-6">
              <Text className="detail_attribute">生产日期</Text>
              <Text className="detail_msg">{attribute.date}</Text>
            </View>
          )}
        </View>
      </View>
      {/* 备注 */}
      <View className="explain">
        <View className="explain_title">价格说明</View>
        <AtCard title="· 划线价">
          <Text style={{ color: "#848484" }}>
            划线价为参考价，并非原价或线下实体门店销售价。该划线价可能是商品〔含服务)的网络零售指导价、品牌供应商提供的正品零售价(如厂商指导价、建议零售价等)或该商品在美团闪购平台上曾经展示过的销售价等，由于地区、时间的差异性和市场行情波动，零售指导价、销售价等可能会与您购物时展示的不一致，该价格仅供您参考。
          </Text>
        </AtCard>
        <AtCard title="· 未划线价">
          <Text style={{ color: "#848484" }}>
            未划线价是当前商品或服务在美团闪购平台的销售价(不含包装费价格)，是您最终决定是否购买商品的依据。*此说明仅当出现价格比较时有效，若商家单独对划线价格进行说明的，以商家的表述为准。
          </Text>
        </AtCard>
        <AtCard title="· 配送分描述">
          <Text style={{ color: "#848484" }}>
            配送费受配送距离、难度、时段、天气、运力等因素影响,店内页面(如商家页及商品详情页)展示的配送费仅为预估配送金额，最终金额以提交订单页显示的配送费金额为准。当商品在享受各项优惠的减免金额后，如遇价格为0元时，配送费减免后最低收取0.01元。
          </Text>
        </AtCard>
        <AtCard title="· 估计到手价">
          <Text style={{ color: "#848484" }}>
            是在商品标价基础上减去各种折扣、可用优惠政策(不包含红包)贾加金额之后的一种预估商品价格，不包含商品打包费和配送费。计算公式为:“预估到手价”=商品原价–会员折扣–新客活动–满减/直降活动–商家代金券。用户在进入结算页面之后，根据满足条件可享的活动、红包、代金券等优惠组合，可能导致最终到手价与显示“预估到手价"有差异和变化，并且不同用户因为可以享受的优惠不同(造成这种不同的原因可能包括是否属于新客、领取的代金券不同、代金券消耗情况等)而导致最终到手价不同。
          </Text>
        </AtCard>
      </View>
      <CartFixedButton />
    </View>
  );
};
export default connect(({ cartList }) => ({ cartList }))(index);
